<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.js"></script>

    <script>
        require.config({
            paths: {
                vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/',
            },
        });
        window.MonacoEnvironment = {
            getWorkerUrl: function (workerId, label) {
                return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/'
            };
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/base/worker/workerMain.js');`)}`;
            },
        };
        require(['vs/editor/editor.main'], function () {

        });
    </script>
</head>
<style>
    #monaco-editor-wrapper {
        height: 100vh;
    }
</style>

<body>
    <div id="app">
        <button id="transform-button">转换</button>
        <div id="monaco-editor-wrapper"></div>
    </div>
    <script>
        let editorInstance = null
        window.onload = function () {
            if (!editorInstance) {
                editorInstance = initEditor('monaco-editor-wrapper')
            }
            const defalutVal = [{
                cname: "'手动发放额度'",
                path: "'/scenes/rule/release/manual/:rule_id'",
                component: "'scenes/rule/release/manual'",
                name: "'scenesManualRelease'",
                pid: 29
            }]
            setViewModel(JSON.stringify(defalutVal), getSql(defalutVal))
            document.getElementById('transform-button').addEventListener('click', function () {
                transform()
            })



        }
        const initEditor = (id, config = {}) => {
            return window.monaco.editor.createDiffEditor(document.getElementById(id), {
                theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark
                autoIndent: true, // 自动缩进
                originalEditable: true,
                language: 'json',
                readOnly: true,
                formatOnType: true, // 在输入后自动格式化
                formatOnPaste: true, // 在粘贴后自动格式化
                wordWrap: 'on',
                diffCodeLens: false,
                ...config
            });
        }
        // 设置变化值
        const setViewModel = (original, modified) => {
            editorInstance.setModel({
                original: monaco.editor.createModel(original, 'json'),
                modified: monaco.editor.createModel(modified, 'sql')
            });
        }
        // 转换ts
        const transform = function () {
            var value = editorInstance.getOriginalEditor().getModel().getValue();
            try {
                let arr = JSON.parse(value)
                let sql = getSql(arr)
                setViewModel(value, sql)
            } catch (error) {

            }


        }

        const getCurDate = () => {
            let now = new Date();
            let month = now.getMonth() + 1; // 注意月份是从0开始的，所以加1
            let day = now.getDate();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();

            // 如果需要两位数表示，可以填充前导0
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hour = hour < 10 ? '0' + hour : hour;
            minute = minute < 10 ? '0' + minute : minute;
            second = second < 10 ? '0' + second : second;

            return `${now.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`
        }
        const formatSql = (dat) => {
            const {
                id,
                pid = "''",
                name,
                cname,
                image = "''",
                description = "''",
                path,
                component,
                code = "''",
                redirect = "''",
                type = 0,
                action_type = 1,
                has_public = 0,
                hide_privilege = 0,
                hide_sidebar = 0,
                has_show_box = 0,
                can_select = 1,
                hidden = 0,
                keep_alive = 0,
                icon = "''",
                icon_selected = "''",
                order_no = 0,
                created_at = "'" + getCurDate() + "'",
                updated_at = "'" + getCurDate() + "'",
                deleted_at = "'1000-01-01 00:00:00'" } = dat
            return `(${pid},${name},${cname},${image},${description},${path},${component},${code},${redirect},${type},${action_type},${has_public},${hide_privilege},${hide_sidebar},${has_show_box},${can_select},${hidden},${keep_alive},${icon},${icon_selected},${order_no},${created_at},${updated_at},${deleted_at})`
        }
        const getSql = (arr) => {
            let str = ''
            arr.forEach((item, index) => {
                str += formatSql(item) + (index !== arr.length - 1 ? ',' : '')
            })
            let a = "INSERT INTO" +
                " `menu` (" +
                "`pid`, `name`, `cname`, `image`, `description`, `path`, `component`, `code`, `redirect`, `type`, `action_type`, `has_public`, `hide_privilege`, `hide_sidebar`, `has_show_box`, `can_select`, `hidden`, `keep_alive`, `icon`, `icon_selected`, `order_no`, `created_at`, `updated_at`, `deleted_at`" +
                ")" +
                "VALUES";
            return a + str
        }


        window.addEventListener('resize', () => {
            if (editorInstance) {
                editorInstance.layout();
            }
        });
    </script>
</body>

</html>